<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-01 13:27:31
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-22 09:24:05
-->
<template>
    <div class="containers-warp">
        <div class="containers">
            <div class="course-head">
                <div class="img-box">
                    <img :src="IMG_URL + course_info.img" alt="" />
                </div>
                <div class="course-head-info">
                    <div class="name">{{course_info.title}}</div>
                    <div class="item">
                        <div class="s">上课时间：</div>
                        <div class="d">{{course_info.classTime}}</div>
                    </div>
                    <div class="item">
                        <div class="s">上课地点：</div>
                        <div class="d">
                            {{course_info.classAddress}}
                        </div>
                    </div>
                    <div class="item">
                        <div class="s">订阅人数：</div>
                        <div class="d">{{course_info.signUpNum}}人</div>
                    </div>

                    <div class="bottom">
                        <div class="price">￥<span>{{course_info.price}}</span>
                        </div>
                        <div class="button-wrap">
                            <button class="btn plain" @click="consult">立即咨询</button>
                            <button class="btn" style="margin-left: 20px" @click="signUp">
                                立即报名
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="course-body">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="15" :md="17">
                        <!-- 课程详情 -->
                        <bar id="details" title="课程详情">
                            <div class="detlis" v-exchangeHtml:foo="course_info.content">
                            </div>
                        </bar>

                        <!-- 老师 -->
                        <bar
                            id="teacher"
                            title="老师"
                            class="mt20"
                            v-if="teacherList.length !== 0"
                        >
                            <div class="teacher-list">
                                <div
                                    class="item"
                                    v-for="(item, index) in teacherList"
                                    :key="index"
                                >
                                    <el-avatar
                                        class="avatar"
                                        fit="cover"
                                        :size="76"
                                        :src="item.img"
                                    ></el-avatar>
                                    <div class="info-wrap">
                                        <div class="j-title">
                                            <span class="name">{{
                                                item.name
                                            }}</span>
                                            <span class="info">{{
                                                item.info
                                            }}</span>
                                        </div>
                                        <div class="info-s">
                                            {{ item.info_s }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </bar>
                    </el-col>
                    <el-col :xs="24" :sm="9" :md="7">
                        <!-- 相关课程 -->
                        <relevant-course
                            class="relevant-course"
                            :data="relevantList"
                        ></relevant-course>
                    </el-col>
                </el-row>
            </div>
        </div>
        <sign-up :course="course_info" :visible.sync="is_signUp"></sign-up>
    </div>
</template>
<script>
import { getRelevantCourse } from "~/api/course.js";
export default {
    data() {
        return {
            // 课程信息
            course_info:{},
            // 相关课程
            relevantList: [],
            // 老师
            teacherList: [
                {
                    img: "/images/example/courseCenter.png",
                    name: "黄老师",
                    info: "心理咨询师培训·9年教龄",
                    info_s: "简介：教育研究院首席名师，",
                },
                {
                    img: "/images/example/avatar.jpg",
                    name: "黄老师",
                    info: "心理咨询师培训·9年教龄",
                    info_s:
                        "简介：教育研究院首席名师，毕业于湖南师范大学，资深教师，从事教育培训行业二十四年。教学经验丰富，在教学过程中善于将讲题和讲重点结合起来，解题能力强，对教师资格证教学有自己独到的理解和教法。",
                },
            ],
            // 报名弹窗
            is_signUp: false,
        };
    },
    async asyncData({params,app}){
        // 课程id
        const COURSE_ID = params.id;

        // 获取课程基本信息
        let getCourseInfo = app.$axios
            .$get(`/edu/course/info/${COURSE_ID}`,{
                params:{
                    source:1
                }
            })
            .then((res) => {
                console.log(res.data)
                if(res.code ===0){
                    return res.data;
                }
            });

        // 好课推荐
        let getRecommendList = app.$axios
            .$get(`/edu/course/courseRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });

        let course_info = await getCourseInfo;
        let relevantList = await getRecommendList;

        return{
            course_info,
            relevantList
        }
    },
    methods: {
        // 报名
        signUp(){
            this.is_signUp = true
        },
        // 咨询
        consult(){
            this.$alert('<div class="consult"><span class="iconfont iconkefu"></span><span class="s">欢迎拨打咨询热线：100-800-8871</span></div>', {
                dangerouslyUseHTMLString: true,
                showConfirmButton:false,
                customClass:'consult-alert'
            }).catch(()=>{});
        }
    },
};
</script>

<style lang="scss" scoped>
.containers-warp{
    padding: 20px 0 40px;
}
.course-head {
    padding: 40px;
    background-color: #ffffff;
    display: flex;
    box-shadow: 0px 3px 6px rgba(153, 153, 153, 0.1);
    .img-box {
        flex: 0 0 45%;
        img {
            width: 100%;
        }
    }
    .course-head-info {
        text-align: left;
        padding-left: 30px;
        position: relative;
        flex: 1;
        .name {
            font-size: 24px;
            color: #333;
            position: relative;
            padding-bottom: 20px;
            @include line-over(1);
            &::before {
                content: "";
                width: 100%;
                height: 1px;
                background-color: #cccccc;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
        .item {
            font-size: 20px;
            margin-top: 20px;
            line-height: 1.5;
            display: flex;
            .s {
                color: #999999;
                white-space: nowrap;
            }
            .d {
                @include line-over(2);
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            .price {
                color: #f93e3e;
                font-size: 38px;
            }
            .button-wrap{
                display: flex;
            }
        }
    }
}

// 老师
.teacher-list {
    .item {
        display: flex;
        padding: 30px 0;
        & + .item {
            border-top: 1px solid #eee;
        }
        &:first-of-type {
            padding-top: 0;
        }
        &:last-of-type {
            padding-bottom: 10px;
        }
        .avatar {
            flex: 0 0 76px;
        }
        .info-wrap {
            padding-left: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .j-title {
                .name {
                    font-size: 18px;
                    color: #333;
                }
                .info {
                    font-size: 14px;
                    color: #999;
                }
            }
            .info-s {
                font-size: 14px;
                color: #666;
                line-height: 1.5;
                margin-top: 12px;
                @include line-over(3);
            }
        }
    }
}

.mt20 {
    margin-top: 20px;
}
.course-body {
    margin-top: 20px;
}
@media screen and (max-width: 1100px) {
    .course-head .course-head-info .bottom {
        flex-direction: column;
        .button-wrap {
            margin-top: 20px;
        }
    }
}
@media screen and (max-width: 760px) {
    .relevant-course {
        margin-top: 20px;
    }
    .course-head {
        flex-direction: column;
        padding: 20px 10px;
    }
    .course-head .course-head-info {
        padding-left: 0;
        margin-top: 20px;
    }
    .course-head .course-head-info .name {
        font-size: 20px;
    }
    .course-head .course-head-info .item {
        font-size: 16px;
    }
    .course-head .course-head-info .bottom .price {
        font-size: 20px;
    }
    .course-head .course-head-info .bottom {
        flex-direction: column;
        margin-top: 20px;
        .button-wrap {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .btn {
                min-width: 120px;
                height: 38px;
                line-height: 38px;
                font-size: 16px;
                border-radius: 35px;
            }
        }
    }
    .teacher-list .item .info-wrap .j-title .info {
        display: block;
        margin-top: 10px;
    }
}
</style>

